<template>
  <div class="app-container">
    <div class="operation">
      <el-button
        type="primary"
        style="margin-bottom: 10px"
        @click="centerDialogVisible = true"
        >添加商品分类</el-button
      >
    </div>
    <el-table
      v-loading="listLoading"
      :data="dataList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="{ row }">
          {{ row.sortNumber }}
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="{ row }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="openUpdate(row)"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-edit"
            @click="deleteShop(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="type ? '新增' : '修改'"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      :close-on-click-moda="false"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        v-if="centerDialogVisible"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="排列序号" prop="sortNumber">
          <el-input v-model="form.sortNumber" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import {
  GetShopClass,
  AddShopClass,
  SetShopClass,
  DeleteShopClass,
} from "@/api/shop";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      dataList: [], //商品分类列表
      listLoading: true,
      pageData: {
        //页码参数
        currPage: 1,
        pageSize: 99,
      },
      form: {
        //添加修改的数据
        name: "", //分类名
        sortNumber: "", //排序
      },
      rules: {
        //验证规则
        name: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 20个字符", trigger: "blur" },
        ],
        sortNumber: {
          required: true,
          message: "请输入排列序号",
          trigger: "blur",
        },
      },
      centerDialogVisible: false, //弹窗
      type: 1, //添加修改类型  1：添加 0：修改
    };
  },
  created() {
    this.getShopClass();
  },
  methods: {
    //获取商品分类列表
    getShopClass() {
      GetShopClass(this.pageData).then((res) => {
        this.dataList = res.data.data_list;
        console.log(this.dataList);
        this.listLoading = false;
      });
    },
    //添加数据
    addShopClass() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          AddShopClass(this.form).then((res) => {
            this.getShopClass();
            this.centerDialogVisible = false;
          });
        } else {
          this.$message.error("请将数据填写完成");
        }
      });
    },
    //打开修改信息弹窗
    openUpdate(data) {
      this.centerDialogVisible = true;
      this.type = 0;
      this.form = Object.assign({}, data);
    },
    //修改数据
    updateData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          SetShopClass(this.form).then((res) => {
            this.getShopClass();
            this.centerDialogVisible = false;
            this.$message.success("修改成功");
          });
        } else {
          this.$message.error("请将数据填写完成");
        }
      });
    },
    deleteShop(id) {
      DeleteShopClass(id).then((res) => {
        this.getShopClass();
        this.$message.success("删除成功");
      });
    },
    //确定提交
    submit() {
      if (this.type) {
        this.addShopClass();
      } else {
        this.updateData();
      }
    },
    //清除数据
    clearForm() {
      this.form.name = "";
      this.form.sortNumber = "";
    },
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
      });
    },
  },
};
</script>
